<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="stylesheet" type="text/css" href="/site/css/styles.css">
    <link rel="stylesheet" href="/assets/fontawesome-free-5.15.4/css/all.min.css">
    <link rel="stylesheet"  href="/assets/element-plus/index.css">
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="6">
                    <el-button type="primary">
                        <i class="el-icon-menu"></i>
                    </el-button>
                </el-col>
                <el-col :span="12">
                    <el-input placeholder="请输入内容" v-model="input"></el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
        </el-header>
        <el-main>
            <div class="mb-4">
                <el-button disabled>Default</el-button>
                <el-button type="primary" disabled>Primary</el-button>
                <el-button type="success" disabled>Success</el-button>
                <el-button type="info" disabled>Info</el-button>
                <el-button type="warning" disabled>Warning</el-button>
                <el-button type="danger" disabled>Danger</el-button>
            </div>
            <el-button type="primary" :icon="Edit" />
            <el-button type="primary" :icon="Share" />
            <el-button type="primary" :icon="Delete" />
            <el-button type="primary" :icon="Search">Search</el-button>
            <el-button type="primary">
                Upload<el-icon class="el-icon--right"><Upload /></el-icon>
            </el-button>
            <el-button
                    v-for="button in buttons"
                    :key="button.text"
                    :type="button.type"
                    link
            >
                {{ button.text }}
            </el-button>
        </el-main>


<!--    <el-table :data="tableData" stripe style="width: 100%">-->
<!--        <el-table-column prop="date" label="Date" width="180" />-->
<!--        <el-table-column prop="name" label="Name" width="180" />-->
<!--        <el-table-column prop="address" label="Address" />-->
<!--    </el-table>-->
</div>
<!-- 引入 Vue -->
<script src="/assets/vue/vue3.min.js"></script>
<script src="/assets/element-plus/index.full.js"></script>
<!-- 引入 Axios -->
<script src="/assets/axios/axios.min.js"></script>
<script src="/site/js/tools/axios-instance.js"></script>
<script src="/site/js/tools/notification.js"></script>


<script>
    const { createApp, reactive } = Vue;
    // const { ElTable, ElTableColumn } = ElementPlus;

    const app = {
        // components: {
        //     ElTable,
        //     ElTableColumn
        // },

        setup() {
            const buttons = Vue.ref([
                { type: '', text: 'plain' },
                { type: 'primary', text: 'primary' },
                { type: 'success', text: 'success' },
                { type: 'info', text: 'info' },
                { type: 'warning', text: 'warning' },
                { type: 'danger', text: 'danger' },
            ])
            const tableData = reactive([
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ]);
            return {
                tableData,buttons
            };
        }
    };
    createApp(app).use(ElementPlus).mount('#app');
</script>
</body>

</html>